<template>
    <div class="table_wrapper">
        <div class="my_search">
            <div class="search_item">
                <el-input v-model.trim="searchParam.username" size="mini" placeholder="用户名"></el-input>
            </div>
         
            <div class="search_item">
                <el-date-picker
                        size="mini"
                        v-model="searchParam.createdTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="创建开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="search_item">
                <el-button class="searchBtn" type="primary" @click="search" size="mini">搜索</el-button>
            </div>
            <div class="search_item">
                <el-button type="info" @click="clearSearch" size="mini">重置</el-button>
            </div>
        </div>
        <div class="my_table_ctr">
            <div class="my_table_ctr_left">
            </div>
            <div class="my_table_ctr_right">
                <el-button type="info" icon="el-icon-refresh" @click="refresh" size="mini"></el-button>
            </div>
        </div>
        <div class="my_table_data">
            <el-table  :data="tableData"
                       size="mini"
                       :border="true"
                       :stripe="true"
                       :highlight-current-row="true"
                       @selection-change="selectChange"
                       @filter-change="filterChange"
                       ref="table"
                       @sort-change="sortChange"
                       v-loading="loading">

                <el-table-column
                        type="index">
                </el-table-column>
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="content" label="操作">
                </el-table-column>
                <el-table-column prop="ip" label="ip">
                </el-table-column>
                <el-table-column :filter-multiple="true"
                                 :filters="filterType"
                                 :filter-method="filterHandler"
                                 prop="type"
                                 column-key="type"
                                 label="操作类型">

                </el-table-column>
                <el-table-column prop="params" label="参数">
                    <template slot-scope="scope">
                        <el-popover
                                placement="right"
                                width="200"
                                trigger="hover">
                            {{scope.row.params}}
                            <span slot="reference">{{(scope.row.params&&scope.row.params.length>20?(scope.row.params.substring(0,20)+"..."):scope.row.params)}}</span>
                        </el-popover>
                    </template>

                </el-table-column>
                <el-table-column  sortable="custom" prop="createdTime" label="创建时间">
                </el-table-column>
            </el-table>
        </div>
        <div class="m_footer">

            <el-pagination
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageParam.size"
                    background
                    layout="prev, pager, next,jumper,sizes, ->, total"
                    :total="pageTotal"
                    :current-page="pageParam.page"
                    @current-change="curChange"
                    @size-change="sizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import curdMixins from '../../../common/mixins/curdMixins'
    import {selectPage} from "../../../api/base/syslog";

    export default {
        name: "syslog",
        mixins:[curdMixins],
        components:{
        },
        data(){
            return{
                filterType:[
                    {text:"查询",value:0},
                    {text:"添加",value:1},
                    {text:"删除",value:2},
                    {text:"修改",value:3},
                    {text:"导入",value:4},
                    {text:"导出",value:5},
                ]
            }
        },
        methods:{
            getList(param){
                return selectPage(param)
            },
        }

    }
</script>

<style scoped lang="sass">
    @import "../../../styles/table"
</style>
